<script setup lang="ts">
import { defineComponent, onMounted } from 'vue'
defineComponent({
  components: {
    Header,
    Footer,
    PlayBar
  }
})

import Header from '@/components/Header/Header.vue'
import Footer from '@/components/Footer/Footer.vue'
import PlayBar from '@/components/PlayBar/PlayBar.vue'
import { RouterView } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { computed } from 'vue'

const userStore = useUserStore()

// 计算背景样式
const backgroundStyle = computed(() => {
  if (userStore.isLoggedIn && userStore.backgroundImage) {
    return {
      backgroundImage: `url(${userStore.backgroundImage})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundAttachment: 'fixed'
    }
  }
  return {
    // 添加默认渐变背景
    backgroundImage: 'linear-gradient(to bottom right, #1a2a3a, #2d4356, #435668)'
  }
})

onMounted(async () => {
  if (localStorage.getItem('token')) {
    await userStore.checkAndUpdateUserInfo()
  }
})
</script>

<template>
  <div id="layout" class="theme-black" :style="backgroundStyle">
    <Header class="layout-container"/>
    <main class="main-content layout-container">
      <RouterView/>
      <Footer/>
    </main>
    <PlayBar class="layout-container"/>
  </div>
</template>

<style scoped lang="scss">
.layout-container {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  
  @media (max-width: 768px) {
    padding: 0 10px;
  }
}

#layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
    pointer-events: none;
  }
  
  &.theme-black {
    color: var(--primary-color);
  }
}

.main-content {
  position: relative;
  z-index: 1;
  flex: 1;
  margin-top: 64px;
  margin-bottom: 100px;
  
  @media (max-width: 768px) {
    margin-top: 56px;
    margin-bottom: 80px;
  }
}

:deep(.page-footer) {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

:deep(header) {
  position: relative;
  z-index: 1;
}
</style>
